
<template>
	 <view class="wap">
		<view class="page-header">
			<image class="logo" style="height: 96px;" src="/static/img/logo.png">
			</image>
		</view>
		<view class="page-form">
			<!-- <view class="page-form-item">
				<view class="page-from-item-input-area">
					<input placeholder="用户名">
					</input>
				</view>
			</view>
			<view class="page-form-item">
				<view class="page-from-item-input-area">
					<input placeholder="密码" type="password">
					</input>
				</view>
			</view>
			<view class="page-footer-area">
				<button class="confirm">登录</button>
			</view> -->
			<view class="page-footer">
				<view class="footer-item">
					<view class="left-icon"></view>
					<view>微信授权登录</view>
					<view class="right-icon"></view>
				</view>
				<view class="footer-item">
					<view class="page-footer-area" @click="login()">
						<button class="confirm">授权登录</button>
					</view>
					<!-- <view >
						<text class="icons"
							style="color: rgb(34, 172, 56); font-size: 50px;"><span></span></text>
					</view> -->
				</view>
			</view>
		</view>
	</view> 
</template>
<script>
	import {wxLogin,appid} from '../../apirequest/api.js';
	export default {
		data() {
			return {

			}
		},
		onShow() {
			this.weChatAuth();
		},
		methods: {
			login:function(){
				// 获取appid
				appid().then(res => {
					let redirectUrl = encodeURIComponent(window.location.href.replace(/[?&]code=(\w+)/i, '').replace(/&state=fanpingsanguo/ig, ''));
					window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${res.data.app_id}&redirect_uri=${redirectUrl}&response_type=code&scope=snsapi_userinfo&state=fanpingsanguo#wechat_redirect`);
				});
			},
			getUrlParam(name){
			    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
			    var r = window.location.search.substr(1).match(reg);
			    if (r!=null) return unescape(r[2]); return null;
			},
			// 微信授权
			weChatAuth() {
				let code = this.getUrlParam('code');
				console.log(code)
				let old_code = uni.getStorageSync('old_code');
				if (code && old_code != code) {
					uni.setStorageSync('old_code', code);
					let parent_id = uni.getStorageSync('parent_id');
					let redirect_url = uni.getStorageSync('redirect_url');
					console.log(redirect_url);
					wxLogin({
						code: code,
						parent_id:parent_id||0,
					}).then(res => {
						if (res.code==1) {
							uni.setStorageSync('token', res.data.userinfo.token);
							if (!res.data.userinfo.mobile) {
								setTimeout(function(){
									uni.redirectTo({
										url:'/pages/changePhone/changePhone'
									});
								},1000);
							} else {
								uni.showToast({
									title:'登录成功',
									icon:'success'
								});
								setTimeout(function(){
									uni.reLaunch({
										url:redirect_url||'/pages/index/index',
									});
								},1000);
							}
						} else {
							uni.showToast({
								title:res.msg,
								icon:'error'
							});
						}
					});
				} 
			},
		}
	}
</script>

<style>
	page{
		background-color: #f7f8f9;
	}
	.wap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		height: 100%
	}

	.wap .page-header {
		width: 100%;
		height: 30vh;
		background-color: #f4ac1c;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: column
	}

	.wap .page-header .logo {
		width: 96px;
		display: block;
		border-radius: 50%;
		margin-top: calc(15vh - 48px)
	}

	.wap .page-form {
		width: 340px;
		height: 30vh;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: column;
		background-color: #fff;
		border-radius: 14px;
		padding-top: 24px;
		position: absolute;
		bottom: 230px;
		box-shadow: 0 6px 9px 0 rgba(0, 0, 0, .03)
	}

	.wap .page-form .page-form-item {
		width: 240px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 9px;
		margin: 4px 0;
		border-bottom: 1px solid #f3f4f5
	}

	.wap .page-form .page-from-item-input-area {
		width: 100%
	}

	.wap .page-form .page-footer-area {
		width: 288px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-flow: column;
		margin-top: 38px
	}

	.wap .page-form .page-footer-area .confirm {
		width: 100%;
		height: 38px;
		line-height: 38px;
		border-radius: 24px;
		background: #f4ac1c;
		color: #fff
	}

	.wap .page-form .page-footer {
		display: flex;
		flex-flow: column;
		margin-top: 48px;
		width: 100%
	}

	.wap .page-form .page-footer .footer-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		    font-size: 28rpx;;
		margin-top: 9px
	}

	.wap .page-form .page-footer .footer-item .left-icon {
		border: 1px solid #ebebeb;
		margin-right: 9px;
		width: 96px
	}

	.wap .page-form .page-footer .footer-item .right-icon {
		border: 1px solid #ebebeb;
		margin-left: 9px;
		width: 96px
	}
</style>
